/** @type {import('tailwindcss').Config} */  
module.exports = {  
  // 指定要处理的文件  
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {  
      // 字号，使用 App.vue 中的 --x-font-size 样式变量配置  
      fontSize(config){  
          const list = ['2xs','xs','sm','base','md','lg','xl','2xl','3xl'];  
          let result = {}  
          list.forEach(it=>{  
              result[it] = `var(--x-font-size-${it})`  
          })  
          return result  
      },  
      extend: {  
          // 间距，tailwindcss中默认间距是rem单位，可以统一设置为uniapp的rpx单位。  
         // 类似的设置根据项目需求自己调整一下就好了，没必要去安装别人的预设，其实主要是小程序不兼容的css比较多，H5和App基本都直接兼容tailwindcss默认的预设  
          spacing(config) {  
              let result = { 0: '0' }  
              // 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包  
              for (let i = 1; i <= 300; i  ) {  
                  result[i] = `${i}rpx`  
              }  
              return result  
          },  
          // 增加颜色板，现在主流UI组件库大都是采用css变量实现定制主题，所以这里引用了全局的css变量，这个css变量的定义位置可以在 App.vue 中 page{} 选择器下  
          // 其实tailwindcss只是一个css工具，不必局限于它内部提供的东西，灵活运用css变量这些特性完全可以整合出自己的生产力工具  
          colors:{   
              'primary': 'var(--x-color-primary)',  
              'tips' : 'var(--x-color-tips)'  
          },  
      },  
  },  
  plugins: [],  
}

